<template>
	<view class="main_section">
<!--    <view class="weather_section">-->
<!--      <view>今日天气:</view>-->
<!--      <view>晴</view>-->
<!--      <view>20~22℃</view>-->
<!--    </view>-->

    <view class="section_1">
      <!--logo图片-->
      <image class="pic" mode="aspectFill" src="@/static/test/logo.jpeg"></image>
    </view>

    <view class="section_1">
      <text class="title">{{meetingSubjectInfo.name}}</text>
    </view>

<!--    会议背景图-->
    <view class="section_2">
      <image class="pic" mode="aspectFill" :src="$util.img(meetingSubjectInfo.img)"></image>

    </view>

<!--    导航按钮-->
    <view class="section_3">
      <view class="ul">
        <view class="li" @click="openView(`/pages/index/introduce?meetingSubjectId=${meetingSubjectInfo.id}`,false)">
          <view class="img_box" style="background-color: #95acf5;">
            <image class="pic"  mode="aspectFill" src="@/static/sys/laba.png"></image>
          </view>
          <text>会议介绍</text>
        </view>
        <view class="li" @click="openView(`/pages/index/car_apply?meetingSubjectId=${meetingSubjectInfo.id}`,false)">
          <view class="img_box" style="background-color: #f39691;">
            <image class="pic"  mode="aspectFill" src="@/static/sys/susheyongche.png"></image>
          </view>
          <text>用车信息</text>
        </view>

        <view class="li" @click="openView(`/pages/index/meeting_file?meetingSubjectId=${meetingSubjectInfo.id}`,false)">
          <view class="img_box" style="background-color: #95acf5;">
            <image class="pic"  mode="aspectFill" src="@/static/sys/wenjian.png"></image>
          </view>
          <text>会序册</text>
        </view>

        <view class="li" @click="openView(`/pages/index/repast_list?meetingSubjectId=${meetingSubjectInfo.id}`,false)">
          <view class="img_box" style="background-color: #f39691;">
            <image class="pic"  mode="aspectFill" src="@/static/sys/jiucan.png"></image>
          </view>
          <text>就餐信息</text>
        </view>

        <view class="li" @click="openView(`/pages/index/seat_list?meetingSubjectId=${meetingSubjectInfo.id}`,false)">
          <view class="img_box" style="background-color: #f39691;">
            <image class="pic"  mode="aspectFill" src="@/static/sys/zuowei.png"></image>
          </view>
          <text>坐席安排</text>
        </view>

        <view class="li" @click="openView(`/pages/index/hotel_info?meetingSubjectId=${meetingSubjectInfo.id}`,false)">
          <view class="img_box" style="background-color: #95acf5;">
            <image class="pic"  mode="aspectFill" src="@/static/sys/ruzhu.png"></image>
          </view>
          <text>入住记录</text>
        </view>

        <view class="li"  @click="openView(`/pages/index/sign_in_list?meetingSubjectId=${meetingSubjectInfo.id}`,false)">
          <view class="img_box" style="background-color: #f39691;">
            <image class="pic"  mode="aspectFill" src="@/static/sys/qiandao.png"></image>
          </view>
          <text>签到记录</text>
        </view>

        <view class="li" @click="openView(`/pages/index/back_receipt?meetingSubjectId=${meetingSubjectInfo.id}`,false)">
          <view class="img_box" style="background-color: #95acf5;">
            <image class="pic"  mode="aspectFill" src="@/static/sys/fanhui.png"></image>
          </view>
          <text>返程回执</text>
        </view>
      </view>
    </view>

<!--    报名按钮-->
    <view class="section_4">
      <view class="btn" @click="openView(`/pages/index/sign_up?meetingSubjectId=${meetingSubjectInfo.id}`,false)">点此报名</view>
    </view>

<!--    联系我们-->
    <view class="section_5">
      <view class="title">联系我们</view>
      <view class="ul">
        <view class="li" v-if="(webConfig.phone || '')">
          <view class="text">联系电话：{{webConfig.phone || ''}}</view>
          <view class="btn" @click="callPhone()">拨打电话</view>
        </view>
        <view class="li" v-if="(webConfig.email || '')">
          <view class="text">电子邮箱：{{webConfig.email || ''}}</view>
          <view class="btn" @click="copyText(webConfig.email || '')">发送邮件</view>
        </view>
      </view>

    </view>

  </view>
</template>

<script>
import apiRoute from '@/api/apiRoute.js';

	export default {
		data() {
			return {
        weapp_openid:'',//微信openid

        //会议主题信息
        meetingSubjectInfo:{
          id:'',
          name:'',
          img:'',
          introduction:'',
        },

        //网站配置项
        webConfig:{
          phone:'',
          email:''
        },
			}
		},
		onLoad() {

		},
    onShow() {
      this.init()
    },
		methods: {

		  async init(){
        await this.getMiNiWxOpenId();//获取微信小程序openid+登录
        //获取会议主题配置信息
        await this.getMeetingSubjectInfo();
        //获取网站配置项信息
        await this.getWebConfig();
		  },

      //获取会议主题信息
      async getMeetingSubjectInfo(){
        let params = {}
        let res = await apiRoute.getMeetingSubjectInfo(params)
        if (res.code != 1) {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
          return
        }

        this.meetingSubjectInfo = res.data
      },

      //获取网站配置项信息
      async getWebConfig(){
        let params = {}
        let res = await apiRoute.getWebConfig(params)
        if (res.code != 1) {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
          return
        }

        this.webConfig = res.data
      },

      //跳转页面
      openView(url,is_auth = false) {
        let token = uni.getStorageSync("token");
        if(!token && is_auth){
          // 未登录，触发微信登录
          this.wxLoginAndGetToken();
        }else if(!token){
         //提示微信登录失败
          uni.showToast({
            title: '微信登录失败,请重新进入小程序',
            icon: 'none'
          });

          //@todo 小程序上线的时候这里的跳转页面代码注释掉!
          uni.navigateTo({
            url: url
          });
        }else{
          //跳转页面
          uni.navigateTo({
            url: url
          });
          // uni.redirectTo({
          //   url: url,
          // })
        }

      },
      // 微信登录并获取 token
      wxLoginAndGetToken() {
        uni.showLoading({
          title: "登录中...",
          mask: true,
        });

        this.getMiNiWxOpenId();
      },

      //获取微信小程序openid
      // 获取微信登录 code 并请求 openid
      async getMiNiWxOpenId() {

        let token = uni.getStorageSync("token");
        if (token) {
          return
        }

        uni.login({
          provider: 'weixin',
          success: (res) => {
            const code = res.code;
            this.fetchOpenId(code); // 调用单独方法
          },
          fail: () => {
            uni.showToast({
              title: '微信登录失败',
              icon: 'none'
            });
          }
        });
      },
      // 获取微信登录 code 并请求 openid
      async fetchOpenId(code) {
        let params = {
          code: code,
        }
        let res = await apiRoute.getOpenid(params)
        if (res.code != 1) {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
          return
        }
        this.weapp_openid = res.data.openid//微信小程序openid
        await this.loginForm()
      },
      //执行登陆操作
      async loginForm(){
        let params = {
          weapp_openid:this.weapp_openid//微信小程序opendi
        }
        let res = await apiRoute.login(params);
        if (res && res.code === 1) {  // 成功状态码为1
          // 登录成功
          if (res.data && res.data.token) {
            uni.setStorageSync("token", res.data.token);
            // 保存过期时间
            if (res.data.expires_time) {
              uni.setStorageSync("expires_time", res.data.expires_time);
            }
          }

          // uni.showToast({
          //   title:'登录成功',
          //   icon: 'success'
          // });

        } else {
          uni.showToast({
            title: res || '登录失败',
            icon: 'none'
          });
        }
      },


      //点击拨打电话
      callPhone(){
		    uni.makePhoneCall({
          phoneNumber: this.webConfig.phone
        });
      },

      //点击复制
      copyText(text) {
		    uni.setClipboardData({
          data: text
        });
		    uni.showToast({
          title: '复制成功',
          icon: 'success'
        });
      }
		}
	}
</script>

<style lang="less" scoped>
.main_section{

  .weather_section{
    padding: 20rpx 10rpx;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .section_1{
    margin-top: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .pic{
      //border: 1px solid red;
      width:500rpx;
      height: 150rpx;
    }
    .title{
      padding: 0 10%;
      font-size: 40rpx;
      text-align: center;
    }
  }

  .section_2{
    margin-top: 30rpx;
    .pic{
      //border: 1px solid red;
      width: 100%;
      height: 350rpx;
    }
  }

  .section_3 {
    margin-top: 30rpx;
    .ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      .li {
        margin-top: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 25%; // 每行 4 个元素，每个占 25% 宽度
        box-sizing: border-box;

        .img_box {
          padding: 20rpx;
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          image {
            width: 50rpx;
            height: 50rpx;
          }
        }

        text {
          margin-top: 5rpx;
          font-size: 28rpx;
        }
      }
    }

  }

  .section_4{
    margin-top: 40rpx;
    display: flex;
    justify-content: center;
    .btn{
      width: 70%;
      padding: 25rpx 0;
      font-size: 30rpx;
      text-align: center;
      color: #FFFFFF;
      background-color: #2a82e4;
      border-radius: 10rpx;
    }
  }

  .section_5{
    margin-top: 50rpx;
    .title{
      color: #2a82e4;
      font-size: 40rpx;
      text-align: center;
    }
    .ul{
      padding: 50rpx;
      display: flex;
      flex-direction: column;
      gap: 20rpx;
      .li{
        display: flex;
        justify-content: space-between;
        font-size: 28rpx;
        .text{}
        .btn{
          color: #2a82e4;
        }
      }
    }
  }
}
</style>
